<template>
  <div class="drawer-demo">
    <div class="example-section">
      <h3 class="section-title">基础抽屉</h3>
      <p class="section-description">不同方向和尺寸的抽屉组件</p>

      <div class="demo-container">
        <div class="demo-wrapper">
          <a-space wrap>
            <a-button type="primary" @click="showDrawer('right')">右侧抽屉</a-button>
            <a-button @click="showDrawer('left')">左侧抽屉</a-button>
            <a-button @click="showDrawer('top')">顶部抽屉</a-button>
            <a-button @click="showDrawer('bottom')">底部抽屉</a-button>
          </a-space>
        </div>
      </div>
    </div>

    <!-- 基础抽屉 -->
    <a-drawer
      v-model:open="drawers.basic"
      :title="drawerConfig.title"
      :placement="drawerConfig.placement"
      :width="drawerConfig.width"
      :height="drawerConfig.height"
    >
      <div class="drawer-content">
        <h4>抽屉内容</h4>
        <p>这是一个{{ drawerConfig.placement }}方向的抽屉。</p>
        <p>您可以在这里放置任何内容，比如表单、列表、详情信息等。</p>
      </div>
    </a-drawer>

    <div class="example-section">
      <h3 class="section-title">组件代码示例</h3>
      <p class="section-description">抽屉组件的使用方法</p>

      <a-collapse>
        <a-collapse-panel key="1" header="基础抽屉">
          <pre class="code-block"><code>&lt;template&gt;
  &lt;a-button type="primary" @click="showDrawer"&gt;打开抽屉&lt;/a-button&gt;

  &lt;a-drawer
    v-model:open="visible"
    title="抽屉标题"
    placement="right"
    width="400px"
  &gt;
    &lt;p&gt;抽屉内容&lt;/p&gt;
  &lt;/a-drawer&gt;
&lt;/template&gt;

&lt;script setup&gt;
import { ref } from 'vue'

const visible = ref(false)

const showDrawer = () =&gt; {
  visible.value = true
}
&lt;/script&gt;</code></pre>
        </a-collapse-panel>
      </a-collapse>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

// 抽屉状态
const drawers = reactive({
  basic: false
})

// 抽屉配置
const drawerConfig = reactive({
  title: '抽屉标题',
  placement: 'right' as 'right' | 'left' | 'top' | 'bottom',
  width: '400px',
  height: '300px'
})

// 显示基础抽屉
const showDrawer = (placement: 'right' | 'left' | 'top' | 'bottom') => {
  drawerConfig.placement = placement
  drawerConfig.title = `${placement}方向抽屉`

  if (placement === 'top' || placement === 'bottom') {
    drawerConfig.width = '100%'
    drawerConfig.height = '400px'
  } else {
    drawerConfig.width = '400px'
    drawerConfig.height = '100%'
  }

  drawers.basic = true
}
</script>

<style scoped>
.drawer-demo {
  max-width: 1200px;
  margin: 0 auto;
}

.example-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.example-section:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  color: #262626;
  margin: 0 0 8px 0;
}

.section-description {
  font-size: 14px;
  color: #8c8c8c;
  margin: 0 0 24px 0;
  line-height: 1.6;
}

.demo-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.demo-wrapper {
  padding: 24px;
  background: #fafafa;
  border: 1px dashed #d9d9d9;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.demo-wrapper:hover {
  border-color: #1890ff;
  background: #f0f8ff;
}

.drawer-content {
  padding: 8px 0;
}

.drawer-content h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #262626;
}

.code-block {
  background: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  padding: 16px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  line-height: 1.45;
  overflow-x: auto;
  margin: 0;
}

.code-block code {
  background: none;
  padding: 0;
  font-size: inherit;
  color: #24292e;
}

@media (max-width: 768px) {
  .example-section {
    padding: 20px;
    margin-bottom: 16px;
  }

  .section-title {
    font-size: 18px;
  }

  .demo-container {
    gap: 16px;
  }

  .demo-wrapper {
    padding: 20px;
  }
}
</style>